<template>
  <view class="content">
    <view class="avatorWrapper">
      <view class="avator">
        <image class="img" src="../../static/img/login.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="form">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item name="email">
          <input class="input" type="text" value="" v-model="formData.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <input class="input" type="password" value="" v-model="formData.password" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>

      <view class="loginBtn" @click="submit">
        <text class="btnValue">登录</text>
      </view>
      <view class="loginBtn" @click="goSignUp">
        <text class="btnValue">去注册</text>
      </view>
    </view>


    <!-- <view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" value="" v-model="iphone"  placeholder="请输入手机号"/>
			</view>
			<view class="inputWrapper">
				<input class="input" type="password" value="" v-model="password" placeholder="请输入密码"/>
			</view>
			<view class="loginBtn">
				<text class="btnValue" @click="login">登录</text>
			</view> -->

    <!-- <button  @click="submit">登录</button> -->
    <!-- <view class="forgotBtn">
			<navigator url="../register/register"><text>- 注册 -</text></navigator>
		</view> -->

  </view>
  </view>
</template>



<script>
  import {
    test,
    postLogin
  } from "@/api/login.js";
  export default {
    data() {
      return {
        formData: {
          email: '',
          password: '',
        },
        rules: {
          email: {
            rules: [{
              required: true,
              errorMessage: '请输入邮箱'
            }, ]
          }
        }
      }
    },
    onLoad() {

    },
    methods: {

      submit() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', res);
          this.login(res)
        }).catch(err => {
          console.log('表单错误信息：', err);
        })
      },




      login(e) {


        postLogin({
          email: this.formData.email,
          password: this.formData.password
        }).then(res => {
          if (res.data.status == 200) {
            uni.setStorageSync('iseats_userInfo', res.data.data)
            uni.switchTab({
              url: '/pages/home/home'
            });
          }
        })

      },
      goSignUp(){
        uni.navigateTo({
          url: '/subpkg/signup/signup'
        });
      }





    }
  }
</script>



<style>
  .content {
    width: 100vw;
    height: 100vh;
  }

  .avatorWrapper {
    height: 45vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .avator {
    width: 500upx;
    height: 500upx;
    overflow: hidden;
  }

  .avator .img {
    width: 100%
  }

  .form {
    padding: 0 100upx;
    margin-top: 10px;
  }

  .input {
    flex: 1;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    padding: 10px;
  }

  .loginBtn {
    width: 100%;
    height: 80upx;
    background: #2979ff;
    border-radius: 50upx;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

  }



  .loginBtn .btnValue {
    color: white;
  }

  .forgotBtn {
    text-align: center;
    color: #8d8d8d;
    font-size: 15px;
    margin-top: 20px;
  }
</style>